<!DOCTYPE html>
<html lang="zh-CN">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <style>
      * {
         margin: 0;
         padding: 0;
      }

      .box {
         width: 150px;
         height: 150px;
         background-color: green;
         /* transform: translate( x , y); 这时以 网页的坐标系为值。双向正值 如果这时数值为百分比会以自身的宽高进行移动*/
         transform: translate(75px, 75px);
         /* transform: translateX (100px) 沿着x轴进行位移
            transform: translateY  为Y轴*/
         /* 不会影响其他盒子的位置  */
      }

      .box1 {
         width: 150px;
         height: 150px;
         background-color: blue;
      }
   </style>
</head>

<body>
   <div class="box"></div>
   <div class="box1"></div>
</body>

</html>